<template>
  <div class="container">
    <template v-for="(item, index) in list">
      <component
        class="wx-mgt10"
        :is="item.component"
        v-bind="item.props"
        v-on="item.events"
        :key="index"
      />
    </template>

    <button @click="push">推入</button>
  </div>
</template>

<script>
import Mock from "./mock";
import * as Message from "@/factory";
import * as MessageComponent from "@/components";
export default {
  name: "App",
  components: {
    ...MessageComponent,
  },

  data() {
    return {
      list: Mock.map((v) => Message[v.type].call(this, v)),
    };
  },

  methods: {
    push() {
      const item = Message['text'].call(this,{
        id: "1",
        icon: require("@/assets/logo-1.jpg"),
        type: "text",
        nickName: "哈丰",
        content: "在吗？",
        time: "2020-02-02 23:23:20",
        isUser: true,
      })
      this.list.push(item);
    },
  },
};
</script>

<style>
body {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  background-color: black;
}

.wx-mgt10 {
  margin-top: 10px;
}

.wx-right > .wx-logo {
  margin-left: 12px;
}

.wx-left > .wx-logo {
  margin-right: 12px;
}

.wx-logo {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 4px;
}

.wx-right {
  text-align: left;
  display: flex;
  flex-direction: row-reverse;
}

.wx-left {
  text-align: left;
  display: flex;
}

.container {
  padding: 10px;
  font-size: 16px;
}

body,
html {
  margin: 0;
  padding: 0;
}

div {
  box-sizing: border-box;
}
</style>
